<template>
  <div class="main">
    <div
      class="item"
      v-for="(_, index) in 7"
      :key="index"
      :style="{ borderColor: props.BgcColor }"
    >
      {{ handleWeek(index) }}
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  BgcColor: { default: () => '#efeff5' }
})
const weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const handleWeek = (index: any) => {
  return weekList[index]
}
</script>
<style scoped lang="scss">
.main {
  display: flex;
  width: 100%;
  height: 50rem;

  .item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #efeff5;
    border-top: 1px solid #efeff5;

    &:first-child {
      border-left: 1px solid #efeff5;
    }
  }
}
</style>
